<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>单据管理</el-breadcrumb-item>
      <el-breadcrumb-item>报销单审批</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card class="box-card">
      <div slot="header" class="clearfix">
        <span>单据列表</span>
      </div>
      <!-- 搜索区域 -->
      <el-input placeholder="请输入内容" v-model="queryInfo.searchContent" clearable
      @clear="getTicketsList">
        <el-select v-model="queryInfo.select" slot="prepend" placeholder="请选择">
          <el-option label="职工姓名" value="employee-name"></el-option>
          <el-option label="工作部门" value="department"></el-option>
        </el-select>
        <el-button slot="append" icon="el-icon-search" @click="getTicketsList"></el-button>
      </el-input>
      <!-- 用户列表区域-->
      <el-table :data="ticketsList" border stripe
                :header-cell-style="{'text-align':'center'}"
                :cell-style="{'text-align':'center'}">
        <!-- 展开列 -->
        <el-table-column type="expand">
          <template slot-scope="scope">
            <div class="block">
              <el-timeline>
                <el-timeline-item v-if="scope.row.auditor1!==''" :timestamp="scope.row.date1" placement="top" color="#0bbd87">
                  <el-card>
                    <h4>{{scope.row.opinion1}}</h4>
                    <p>{{scope.row.auditor1}} 审核于 {{scope.row.date1}}</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item v-if="scope.row.auditor2!==''" :timestamp="scope.row.date2" placement="top" color="#519EEE">
                  <el-card>
                    <h4>{{scope.row.opinion2}}</h4>
                    <p>{{scope.row.auditor2}} 审核于 {{scope.row.date2}}</p>
                  </el-card>
                </el-timeline-item>
                <el-timeline-item v-if="scope.row.auditor3!==''" :timestamp="scope.row.date3" placement="top" color="#EE220B">
                  <el-card>
                    <h4>{{scope.row.opinion3}}</h4>
                    <p>{{scope.row.auditor3}} 审核于 {{scope.row.date3}}</p>
                  </el-card>
                </el-timeline-item>
              </el-timeline>
            </div>
          </template>
        </el-table-column>
        <!-- 信息列 -->
        <el-table-column type="index" label="序号"></el-table-column>
        <el-table-column prop="employeeName" label="职工姓名"></el-table-column>
        <el-table-column prop="department" label="职工部门" ></el-table-column>
        <el-table-column prop="sex" label="性别"></el-table-column>
        <el-table-column prop="age" label="年龄"></el-table-column>
        <el-table-column prop="fee" label="医疗费用"></el-table-column>
        <el-table-column prop="report" label="上报金额"></el-table-column>
        <el-table-column prop="date" label="上报日期"></el-table-column>
        <el-table-column label="操作" width="150px">
          <template slot-scope="scope">
            <!--查看详情按钮-->
            <el-tooltip class="item" effect="dark" content="查看详情" placement="top" :enterable="false">
              <el-button type="primary" icon="el-icon-zoom-in" size="mini" @click="showCheckDialog(scope.row.receipt_id)"></el-button>
            </el-tooltip>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :total="total"
        :current-page="queryInfo.nowPage"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        >
      </el-pagination>
    </el-card>
    <!-- 查看票据的对话框 -->
    <el-dialog title="票据详情" :visible.sync="checkDialogVisible" width="40%">
      <el-steps style="width: 100%" :active="ticketInfoForm.checkProcess" finish-status="success" align-center>
        <el-step title="预算科审核">1</el-step>
        <el-step title="部门经理审核">2</el-step>
        <el-step title="财务处审核">3</el-step>
      </el-steps>
      <!-- 内容主体区域 -->
      <el-form :model="ticketInfoForm" label-width="100px" style="margin-top: 30px">
        <el-form-item label="职工姓名" prop="employeeName">
          <el-input class="form-input" v-model="ticketInfoForm.employeeName" disabled></el-input>
        </el-form-item>
        <el-form-item label="职工工号" prop="workNumber">
          <el-input class="form-input" v-model="ticketInfoForm.workNumber" disabled></el-input>
        </el-form-item>
        <el-form-item label="职工部门" prop="department">
          <el-input class="form-input" v-model="ticketInfoForm.department" disabled></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="sex">
          <el-input class="form-input" v-model="ticketInfoForm.sex" disabled></el-input>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input class="form-input" type="age" v-model.number="ticketInfoForm.age" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="就诊医院" prop="hospital">
          <el-input class="form-input" v-model="ticketInfoForm.hospital" disabled></el-input>
        </el-form-item>
        <el-form-item label="医疗费用" prop="fee">
          <el-input class="form-input" type="number" v-model.number="ticketInfoForm.fee" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="上报金额" prop="report">
          <el-input class="form-input" type="number" v-model.number="ticketInfoForm.report" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="开票日期" prop="ticketDate">
          <el-input class="form-input" type="date" v-model="ticketInfoForm.ticketDate" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="上报日期" prop="date">
          <el-input class="form-input" type="date" v-model="ticketInfoForm.date" autocomplete="off" disabled></el-input>
        </el-form-item>
        <el-form-item label="票据原始影像" prop="picture">
          <el-image
            style="width: 300px; height: 200px ;display: block"
            :src="ticketInfoForm.picture"
            :preview-src-list="srcList">
          </el-image>
        </el-form-item>
        <div class="check_button">
          <el-button type="primary" @click="showPassDialog(ticketInfoForm.id,ticketInfoForm.checkProcess)">通过</el-button>
          <el-button type="danger" @click="showRefuseDialog(ticketInfoForm.id)">驳回</el-button>
        </div>
      </el-form>
    </el-dialog>
    <!-- 通过审核的对话框 -->
    <el-dialog title="提示" :visible.sync="passDialogVisible"
               width="30%" @close="passDialogClosed">
      <!-- 内容主体区域 -->
      <span>请填写审核意见</span>
      <!-- 内容主体区域 -->
      <el-input type="textarea"
                placeholder="请输入审核意见"
                class="form-input opinion"
                v-model="idInfo.opinion"
                :autosize="{ minRows: 4, maxRows: 10}"
                maxlength="255"
                show-word-limit
                clearable>
      </el-input>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="passDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="pass">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 驳回审核的对话框 -->
    <el-dialog title="提示" :visible.sync="refuseDialogVisible"
               width="30%" @close="refuseDialogClosed">
      <!-- 内容主体区域 -->
      <span>请填写审核意见</span>
      <!-- 内容主体区域 -->
      <el-input type="textarea"
                placeholder="请输入审核意见"
                class="form-input opinion"
                v-model="idInfo.opinion"
                :autosize="{ minRows: 4, maxRows: 10}"
                maxlength="255"
                show-word-limit
                clearable>
      </el-input>
      <!-- 底部区域 -->
      <span slot="footer" class="dialog-footer">
        <el-button @click="refuseDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="refuse">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
  data () {
    return {
      // 票据列表
      ticketsList: [],
      // 总数
      total: 0,
      queryInfo: {
        // 当前页数
        nowPage: 1,
        // 当前每页显示多少条数据
        pageSize: 10,
        // 选择种类
        select: '',
        // 搜索内容
        searchContent: '',
        // 审核进程
        process: null
      },
      //票据详情
      ticketInfoForm: {},
      // 控制查看票据对话框的显示与隐藏
      checkDialogVisible: false,
      // 控制通过对话框的显示与隐藏
      passDialogVisible: false,
      // 控制驳回对话框的显示与隐藏
      refuseDialogVisible: false,
      //图片预览功能
      srcList: [],
      // 操作的对象id
      idInfo: {
        receipt_id: 1,
        process: -1,
        auditor: '',
        opinion: ''
      }
    }
  },
  created () {
    this.idInfo.process=this.$root.roleId-1
    this.idInfo.auditor=this.$root.name
    this.queryInfo.process=this.$root.roleId-1
    this.getTicketsList()
  },
  methods: {

    /**
     * 获取审核中单据
     */
    async getTicketsList () {
      //console.log(this.queryInfo)
      const res = await this.$http.get('unchecked-ticket', { params: this.queryInfo })
      if (res.status !== 200) {
        if(res.status === 403) {
          return this.$message.error('您没有获取审核列表的权限!')
        }
        return this.$message.error('获取审核列表失败!')
      }
      //console.log(res)
      this.total = res.data.total
      this.ticketsList = res.data.tickets

    },

    /**
     * 监听分页尺寸改变
     * @param newSize:新的分页尺寸
     */
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize
      this.getTicketsList()
    },

    /**
     * 监听当前页码变化
     * @param nowPage:当前页码
     */
    handleCurrentChange (nowPage) {
      this.queryInfo.nowPage = nowPage
      this.getTicketsList()
    },

    /**
     * 设置票据图片的url
     */
    setImageUrl:function(pictureUrl){
      // 0. 设置请求参数
      const method = 'GET'
      const Host = 'tickets.bj.bcebos.com';
      const accessKey = '79c9cba51f0a4df1a6281aab51cdad3e';
      const secretKey = 'b21aa6a38adf439fa2dd26c6033e1311';
      let url='/'+pictureUrl; // 要有 "/"
      const params = {};
      const headers = {
        'Host': Host
      };
      // 1. 生成认证字符串signature
      const Auth = require('@baiducloud/sdk').Auth;
      const auth = new Auth(accessKey, secretKey);
      let signature = auth.generateAuthorization(method, url, params, headers);

      // 2. API方式 访问资源
      let picture = 'http://' + Host + url + '?authorization=' + signature;
      // console.log(picture)
      return picture
    },

    /**
     * 展示查看票据的对话框
     * @param id 票据ID
     */
    async showCheckDialog(id){
      this.idInfo.receipt_id=id
      // console.log(this.idInfo.receipt_id)
      let res=await this.$http.get('ticket', { params: this.idInfo })
      //console.log(res)
      if (res.status !== 200) {
        return this.$message.error('获取票据详情失败!')
      }
      this.ticketInfoForm=res.data
      let temp=this.ticketInfoForm.picture
      this.ticketInfoForm.picture = this.setImageUrl(temp)
      this.srcList.push(this.ticketInfoForm.picture)
      this.checkDialogVisible = true
    },

    /**
     * 展示通过审核的对话框
     * @param id 票据ID
     * @param process 审核进程
     */
    showPassDialog (id,process) {
      this.passDialogVisible = true
      this.idInfo.receipt_id = id
      this.idInfo.process = process
    },

    /**
     * 关闭审核通过对话框之后的重置
     */
    passDialogClosed(){
      this.idInfo.opinion = ''
    },

    /**
     * 展示驳回审核的对话框
     */
    showRefuseDialog (id) {
      this.refuseDialogVisible = true
      this.idInfo.receipt_id = id
    },

    /**
     * 关闭驳回审核对话框之后的重置
     */
    refuseDialogClosed(){
      this.idInfo.opinion = ''
    },

    /**
     * 通过审核的函数
     */
    async pass () {
      const res = await this.$http.get('pass-ticket', { params: this.idInfo })
      if(res.status===403){
        return this.$message.error('您没有审核票据的权限!')
      }
      if (res.status !== 200 || res.data === false) {
        return this.$message.error('操作失败')
      } else {
        this.$message.success('操作成功')
      }
      this.passDialogVisible = false
      this.checkDialogVisible = false
      this.getTicketsList()
    },

    /**
     * 驳回审核的函数
     */
    async refuse () {
      const res = await this.$http.get('refuse-ticket', { params: this.idInfo })
      if(res.status===403) {
        return this.$message.error('您没有审核票据的权限!')
      }
      if (res.status !== 200 || res.data === false) {
        return this.$message.error('操作失败')
      } else {
        this.$message.success('操作成功')
      }
      this.refuseDialogVisible = false
      this.checkDialogVisible = false
      this.getTicketsList()
    }
  }
}
</script>
<style lang="less" scoped>
  .el-input {
    width: 500px;
  }
  .el-select {
    width: 110px;
  }
  .input-with-select .el-input-group__prepend {
    background-color: #fff;
  }
  .el-table {
    margin-top: 15px;
    font-size: 12px;
  }
  .el-pagination {
    margin-top: 15px;
  }
  .form-input {
    width: 80%;
  }
  .opinion {
    width: 90%;
    margin: 20px;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .check_button {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: 100%;
    align-items: center;
  }
</style>
